<template>
<div class="song">
	<div class="bg" :style="{background:'url('+pic+') no-repeat',backgroundSize: 'cover',backgroundPosition:'50% 0%'}" ><div class="bg-warp"></div></div>
	
		<headlogo class="logo"></headlogo>
		<img src="https://s3.music.126.net/m/s/img/needle.png?702cf6d95f29e2e594f53a3caab50e12" class="musicNeedle" />
		
		
		
		<div class="m-song-warp">
			<div class="m-song-disc" @click="play();roll();music()" :style="{transform: 'rotate('+rollang+'deg)'}" >
				<div class="m-song-turn" >
					
					<!--点击后旋转的部分-->
					<div class="m-song-rollwrap">
						<div class="m-song-img">
							<img :src="pic" class="u-img"  />
							<audio :src="songSrc" class="theSong" @timeupdate="update" ></audio>
						</div>
						
					</div>
					<div class="song-lgour">
						<div class="song-light"></div>
					</div>
				</div>
				
			</div>
			<div class="m-song-plybtn" v-if="!isPlay" @click="play();roll();music()" ></div>
		</div>
		
		
		<song-info :handleLyric='theLyric' :title='songTitle' :curTime="currentTime" ></song-info>
		
		<full-lyric></full-lyric>
		
		
		
		<download class="down" ></download>
		<hot-comment class="comment" :hotcoms="hotComs" :limit="limit" ></hot-comment>
		
		<more-comment></more-comment>
		
		<inc-playlist class="incPlaylist"></inc-playlist>
		
		<like-this :list='simi'></like-this>
	
	
	
</div>
</template>

<script>
	import Lyric from 'lyric-parser'
	import axios from 'axios'
	import api from '@/api'
	import headlogo from '@/svg/headlogo.svg'
	import songInfo from '@/components/songInfo'
	import download from '@/components/download'
	import fullLyric from '@/components/fullLyric'
	import hotComment from '@/components/hotComment'
	import moreComment from '@/components/moreComment'
	import incPlaylist from '@/components/incPlaylist'
	import likeThis from '@/components/likeThis'
	
	
	export default {
		
		data(){
			return {
				list:'',
				pic:'',
				obj:{
					backgroundColor: 'red',
					backgroundImage: "url('+this.pic+')"
					
				},
				isPlay:true,
				timer:'',
				rollang:1,
				songSrc:'',
				theSong:'',
				songTitle:'',
				theLyric:'',
				ric:'',
				currentTime:'',
				hotComs:'',
				limit:5,
				simi:'',
				id:''
				
			}
		},
		deactivated(){
//			console.log('deactivated')
			clearInterval(this.timer);
			this.isPlay=false;
		},
		methods:{
			update(){
				try{
					this.theSong = document.querySelector('.theSong');
//					console.log(this.theSong.currentTime)
	//				console.log(~~this.theSong.currentTime)
	//				存储当前的歌曲播放时间
	//				currentTime是audio dom元素的属性,获取当前时间
					this.currentTime=~~this.theSong.currentTime;
				}catch(e){
					//TODO handle the exception
				}
				
					
				
				
			},
			play(){
				
//				this.rollang=this.rollang+1;
//				console.log(this.rollang);
				if(this.isPlay){
					this.isPlay=false;
					
				}else{
					this.isPlay=true;
				}
//				console.log(this.isPlay)
//				this.roll(this.isPlay);
			},
			roll(){
				var rollwarp = document.querySelector(".m-song-rollwrap");
//				clearInterval(this.timer);	
				if(this.isPlay==true){
					this.timer = this.roler();
//					console.log(this.rollang)
				}else{
					clearInterval(this.timer);
				}
				
				
			},
			
			roler(){
				return setInterval(()=>{
						this.rollang=this.rollang+1;
//						console.log(this.rollang);
						
					},50)
			},
			music(){
				this.theSong=document.querySelector('.theSong');
				if(this.isPlay==true){
					this.theSong.play();
				}else{
					this.theSong.pause();
				}
			}
			
			
		},
		watch:{
			$route:function(newValue){
//				console.log(newValue)
				location.reload()
			}
		},
		name:'song',
		mounted:async function(){
//			console.log("mounted")
		this.play();
		this.$store.commit('hiddentHead',{
						hiddentHead:true
					})
		
			let res = await axios.get(api.detail+"?ids="+this.$route.query.id);
			let re = await axios.get(api.Lyric+this.$route.query.id);
			this.id=this.$route.query.id;
			this.list=res.data.songs[0];
			this.pic=this.list.al.picUrl;
			this.songSrc=api.songUrl+this.$route.query.id+'.mp3';
			this.songTitle=this.list.name+'（'+this.list.alia[0]+'）';
			
//			console.log(this.songTitle)
//			请求歌词
			
//			console.log(re);
			this.theLyric=re.data.lrc.lyric;
//			console.log('hello')
			this.ric = new Lyric(this.theLyric);
			this.theLyric = this.ric.lines;
//			console.log(this.theLyric);
		
		},
		activated:async function(){
//			console.log("activated")
		this.$store.commit('hiddentHead',{
				hiddentHead:true
			});
			
//		async function a(){
//			let res = await axios.get(api.detail+"?ids="+this.$route.query.id);
//			console.log(res)
//		}
			let res = await axios.get(api.detail+"?ids="+this.$route.query.id);
			let re = await axios.get(api.Lyric+this.$route.query.id);
			this.id=this.$route.query.id;
			this.list=res.data.songs[0];
			this.pic=this.list.al.picUrl;
			this.songSrc=api.songUrl+this.$route.query.id+'.mp3';
			this.songTitle=this.list.name+'（'+this.list.alia[0]+'）';
			
//			console.log(this.songTitle)
//			请求歌词
			
//			console.log(re);
			this.theLyric=re.data.lrc.lyric;
//			console.log(this.theLyric);
//			console.log('hi')
			this.ric = new Lyric(this.theLyric);
			this.theLyric = this.ric.lines;
//			console.log(this.theLyric);

			let comRes = await axios(api.songComment+this.$route.query.id+"&limit="+this.limit);
//			console.log(comRes.data.hotComments);
			this.hotComs = comRes.data.hotComments;
//			console.log(this.hotComs)
//			获取相似歌单
			let simiRes = await axios(api.simi+this.$route.query.id);
//			console.log(simiRes);
			this.simi = simiRes.data.songs;
//			console.log(this.simi);
					
	},
		components:{
			headlogo,
			songInfo,
			download,
			fullLyric,
			hotComment,
			moreComment,
			incPlaylist,
			likeThis
			
		}
	}
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';


.incPlaylist{
	margin-top: r(80px);
    padding-bottom: r(60px);
    line-height: 1.6;
}

.comment{
	margin-top: r(200px);
}


.down{
	position: fixed;
	width:100%;
	left: 0;
	bottom: 0;
	&::after{
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		filter: blur(10px);
		background: inherit;
	}
	
}

.bg{
	width: 100%;
	height: r(1136px);
	position: fixed;
	top:0;
	left:0; 
	z-index: -5;
	&::before{
		content: "";
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		filter: blur(10px);
		background: inherit;
		background-color: rgba(0,0,0,0.6);
	}
	&:after{
		width:100%;
		height:100%;
		position:absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		z-index: 50;
		text-align: left;
		
	}
	
}
.bg-warp{
		width:100%;
		height:100%;
		position:absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		z-index: 50;
		text-align: left;
	}
.logo{
	position: absolute;
	left: r(0px);
	top: r(20px);
	width: r(200px);
	margin-left: r(20px);
}
.musicNeedle{
	width: r(168px);
	position: absolute;
	top: 0;
	left: r(285px);
	z-index: 100;
}
.m-song-warp{
	width: 100%;
	margin-top: r(100px);
	.m-song-disc{
		position: relative;
	    width: r(496px);
	    height: r(496px);
	    margin: 0 auto;
	   transition: transform 0.05s;
	}
}
.m-song-turn{
	/*position: absolute;
	z-index: 99;*/
	width: 100%;
	height: 100%;
	&::before{
		content: " ";
	    position: absolute;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    z-index: 2;
	    background: url(https://s3.music.126.net/m/s/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f) no-repeat;
	    background-size: contain;
	}
}
.m-song-rollwrap{
	position: absolute;
    width: r(300px);
    height: r(300px);
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: r(-150px) 0 0 r(-150px);
    .m-song-img{
    	width: 100%;
	    height: 100%;
	    border-radius: 50%;
	    overflow: hidden;
	    background: url(https://s3.music.126.net/m/s/img/disc_default.png?7c9b3adc16f5485c2bfbe8a540534188) no-repeat;
	    background-size: contain;
    }
}
.u-img{
	width: 100%;
    vertical-align: middle;
}
.m-song-plybtn{
	position: absolute;
    width: r(100px);
    height: r(100px);
    left: 50%;
    top: 48%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-250%);
    z-index: 1;
    background: url(../../public/img/play.png) 0 0 no-repeat;
    background-size: contain;
    
}
.song-lgour{
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.song-light{
	
	background: url(https://s3.music.126.net/m/s/img/disc_light.png?2bb24f3fd11569809b817b4988f12bc7) no-repeat;
	background-size: contain;
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

</style>